<template>
	<div class="index-wrap">
		<div class="first-screen b-wrap">
			<div class="space-between">
				<!-- 轮播图 -->
				<div class="home-slide">
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div
								class="swiper-slide"
								v-for="rItem in rotationList"
								:key="rItem.imgId"
							>
								<img :src="rItem.imgUrl" alt="" />
							</div>
						</div>
						<div class="swiper-pagination"></div>
					</div>
					<!-- <a href="javascript:;" class="more">更多</a> -->
				</div>
				<!-- 推荐视频 -->
				<div class="rcmd-box-wrap">
					<div class="rcmd-box" v-if="videoList.length">
						<CardCommon
							v-for="item in videoList.slice(0, 6)"
							:key="item.uid"
							:cardCommon="item"
						/>
					</div>
					<div class="change-btn">
						<!-- <i class="iconfont"></i> -->
						<i class="iconfont icon-huanyihuan"></i>
						<span>换一换</span>
					</div>
				</div>
			</div>
			<ReportWrap
				v-for="report in reportList"
				:key="report.id"
				:report="report"
			/>
			<ListCard
				v-for="(list, index) in ListCardData"
				:key="index"
				:list="list"
			/>
		</div>
	</div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import ReportWrap from "@/components/reportWrap/index.vue";
import CardCommon from "@/components/cardCommon";
import ListCard from "@/components/ListCard";

import { mapState, mapActions } from "vuex";
import { getReport } from "@/api/lh-api/index";
export default {
	name: "IndexComp",
	data() {
		return {
			// indexData: {},
			recommendList: [],
			ListCardData: ["番剧", "推广", "动画", "直播"],
			reportList: [],
		};
	},
	async mounted() {
		// 获取首页视频推荐
		this.getVideoList();
		const reportRes = await getReport();
		// console.log(reportRes);
		this.reportList = reportRes;
	},
	computed: {
		...mapState("index", ["videoList"]),
		rotationList() {
			return this.videoList
				.map((item) => ({ imgId: item.uid, imgUrl: item.coverPic }))
				.slice(10, 15);
		},
	},
	methods: {
		...mapActions("index", ["getVideoList"]),
	},
	components: {
		ReportWrap,
		CardCommon,
		ListCard,
	},
	watch: {
		rotationList() {
			// swiper使用
			this.$nextTick().then(() => {
				console.log("rotationList数据完成");
				new Swiper(".swiper-container", {
					autoplay: {
						delay: 2000,
						stopOnLastSlide: false, // 播放完最后一张图片后是否停留在最后一张图片上，停止轮播
						disableOnInteraction: false, // 用户操作轮播图后，停止自动轮播
					},
					pagination: {
						el: ".swiper-pagination",
						clickable: true, // 是否可以点击跳转
					},
				});
			});
		},
	},
};
</script>
<style lang="less">
// a,
// a:hover {
// 	text-decoration: none;
// 	// color: inherit;
// }
.index-wrap {
	width: 100%;
	margin-top: 20px;
}
.b-wrap {
	width: 1300px;
	// height: 526px;
	margin: 0 auto;
	box-sizing: border-box;
}
.space-between {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
}

// 轮播图
.space-between .home-slide {
	position: relative;
	cursor: pointer;
}
.space-between .swiper-container {
	width: 550px;
	height: 396px;
	border-radius: 8px;
	box-sizing: border-box;
}
.swiper-container .swiper-wrapper {
	text-align: center;
	line-height: 400px;
	color: #b0b0b0;
	box-sizing: border-box;
}
.space-between .swiper-slide img {
	width: 100%;
	height: 100%;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
	width: 100px;
	left: 0px;
}
.swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	border: 2px solid transparent;
	background-color: #fff;
	opacity: 1;
	transition: all 0.2s;
	box-sizing: border-box;
}
.swiper-pagination-bullet:hover {
	border: 2px solid #fff;
	background-color: #00a1d6;
	transform: scale(1.3);
}
.swiper-pagination .swiper-pagination-bullet-active {
	border-width: 0;
	background-color: transparent;
	background-image: url("@/assets/image/swiper/icon_slide_selected.png");
	background-size: cover;
	background-repeat: no-repeat;
	transform: scale(1.8);
}
.more {
	position: absolute;
	z-index: 11;
	opacity: 0;
	transition: opacity 0.3s;
	bottom: 20px;
	right: 12px;
	font-size: 12px;
	padding: 4px 8px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	border-radius: 2px;
}
.home-slide:hover .more {
	opacity: 1;
}

// 推荐视频样式
.rcmd-box-wrap {
	position: relative;
	.change-btn {
		position: absolute;
		right: -20px;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		border: 1px solid rgb(227, 229, 231);
		cursor: pointer;
		margin-left: 0;
		width: 20px;
		padding: 9px;
		border-radius: 8px;
		&:hover {
			background-color: #b0b0b0;
		}
	}
}
.rcmd-box {
	// width: 698px;
	height: 470px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	// align-content: space-between;
}

// 推广
</style>
